<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        ul li {
            list-style: none;
        }
        
        .header {
            box-sizing: border-box;
            width: 387px;
            height: 64px;
            margin: 0 auto;
            /* margin-left: 547px; */
            /* border: 1px solid red; */
        }
        
        .header ul {
            margin-top: 15px;
            box-sizing: border-box;
            width: 100%;
            height: 26px;
            clear: both;
            /* border: 1px solid red; */
        }
        
        .header ul li {
            box-sizing: border-box;
            float: left;
            width: 136px;
            height: 100%;
        }
        
        .header ul li:nth-child(1) {
            margin-left: 24px;
            margin-right: 8px;
        }
        
        .header ul li:nth-child(3) {
            margin-left: 8px;
            width: 67px;
        }
        
        .header ul li input[type="text"] {
            box-sizing: border-box;
            width: 136px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
            text-indent: 10px;
            /* outline: 0; */
            /* border: 1px; */
        }
        
        .inputOfcus {
            outline: 0;
            border: 1px solid pink;
        }
        
        .header ul li input[type="password"] {
            box-sizing: border-box;
            width: 136px;
            height: 26px;
            line-height: 26px;
            font-size: 12px;
            text-indent: 10px;
        }
        
        .header ul li button {
            box-sizing: border-box;
            line-height: 26px;
            text-align: center;
            width: 67px;
            height: 26px;
            color: white;
            font-size: 12px;
            border: 0;
            outline: none;
            background: #0098c2;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="header">
        <ul>
            <li>
                <input type="text" name="username" id="username" placeholder="邮箱/ID/手机号">
            </li>
            <li>
                <input type="password" name="password" id="password" placeholder="密码">
            </li>
            <li>
                <button class="subit_btn">登录</button>
            </li>
        </ul>
    </div>
    <script>
        /*  #输入框内容显示和隐藏（加强训练）（选做）
                - 题目描述
                    仿世纪佳缘网，显示和隐藏输入框中的提示内容，具体表现如下图：
                    1）输入框获得焦点，提示内容消失，边框变色
                    2）输入框失去焦点，如果内容为空，提示内容恢复，边框变色；如果内容不为空，只有边框变色 */
        // 获取输入框
        let inputs = $("input");
        // 获取文本输入框
        let text_inpnt = $("input")[0];
        // 获取密码输入框
        let password_input = $("input")[1];
        //获取登录按钮
        let btn = $("#subit_btn");
        // console.log(text_inpnt.placeholder);
        for (let i = 0; i < inputs.length; i++) {
            inputs[i].onfocus = function() {
                if (this.value == "") {
                    this.className = "inputOfcus";
                    this.placeholder = '';
                } else {
                    this.className = "inputOfcus";
                }


            }
        }
        // 文本框失去焦点事件
        text_inpnt.onblur = function() {
                if (this.value == "") {
                    this.className = "";
                    this.placeholder = '邮箱/ID/手机号';

                } else {
                    this.className = "";
                }

            }
            // 密码框失去焦点事件
        password_input.onblur = function() {
            if (this.value == "") {
                this.className = "";
                this.placeholder = '密码';

            } else {
                this.className = "";
            }

        }



        function $(select) {
            return document.querySelectorAll(select);
        }
    </script>
</body>

</html>